<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的总和练习</title>
    <script src="https://unpkg.com/vue@3.4.32/dist/vue.global.js"></script>
    <style>
        /* 整体表格样式 */
        table {
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        /* 表头样式 */
        th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: left;
            padding: 15px 20px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 14px;
        }

        /* 表格数据单元格样式 */
        td {
            padding: 12px 20px;
            border-bottom: 1px solid #e0e0e0;
            transition: background-color 0.3s ease;
            font-size: 14px;
        }

        /* 奇数行背景色 */
        tr:nth-child(odd) {
            background-color: #f8f9fa;
        }

        /* 偶数行背景色 */
        tr:nth-child(even) {
            background-color: white;
        }

        /* 鼠标悬停效果 */
        tr:hover {
            background-color: #e3f2fd !important;
            transform: scale(1.01);
            transition: all 0.3s ease;
        }

        /* 最后一行去除下边框 */
        td:last-child {
            border-bottom: none;
        }

    </style>
    <!--
        1、vue.js 的综合练习
          01 数据展示功能
               01 准备数据

               02 v-for 循环展示数据

          02 数据添加的功能
              01  表格收集数据

              02  拿到数据 添加到 数组中

          03 删除的功能

    -->

</head>
<body>

<div id="app">
    <!--
         table 是表格标签
              tr 行
              td 列
    -->
    请输姓名:<input type="text" v-model="stu.username">
    请输年龄:<input type="text" v-model="stu.age">
    请输工作:<input type="text" v-model="stu.job"> <br>
    <button @click="addStu">添加学生</button>

    <h2 v-show="stus.length==0">去招几个学生到广科</h2>
    <table border="1" cellpadding="0" cellspacing="0" v-show="stus.length>0">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>职位</td>
            <td>操作</td>
        </tr>
        <!-- <tr v-for="(stu,index) in stus" :key="index">
                     (stu,index) in stus
                      stu 是 数组中的元素
                      index 是下标
          -->
        <tr v-for="(stu,index) in stus" :key="index">
            <td>{{stu.username}}</td>
            <td>{{stu.age}}</td>
            <td>{{stu.job}}</td>
            <td>
                <button @click="delStu(index)"> 删除 </button>
            </td>

        </tr>

    </table>
    一共有{{stus.length}}个学生


</div>
<script>
    const {createApp, ref} = Vue;
    const app = createApp({
        setup(){


            let stus = ref(
                [
                    {"username":"乔峰","age":"34","job":"帮主"},
                    {"username":"段正淳","age":"44","job":"王爷"},
                    {"username":"虚竹","age":"20","job":"和尚"}
                ]
            )

            let stu = ref({
                username:"",
                age:"",
                job:""
            })

            function addStu(){

                //添加一个校验 不能添加空

                if (stu.value.username === "" || stu.value.age ==="" || stu.value.job === ""){
                    alert("输入的内容不能为空")
                    return
                }

                // 拿到 ref 包裹的数据 这个是代理对象 数据在value 属性
                //拿 ref包裹的数据 需要通过 对象.value 拿到数据
                console.log(stu.value)

                //添加操作
                stus.value.push(stu.value)

                //添加清空
                stu.value = {
                    username:"",
                    age:"",
                    job:""
                };
            }

            function delStu(index){
                //splice 这个方法 2 个参加是 删除操作
                //  第一个参数 从 拿个位置开始删除  一般给下标
                //  第二个参数   删除几个元素
                stus.value.splice(index,1);
            }

            return {
                stus,stu,addStu,delStu
            };
        }
    })
    app.mount('#app')
</script>

</body>
</html>